<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字节跳动底部横幅</title>
</head>

<body>
    代码来源：https://www.toutiao.com/article/7233665157719736872/?app=news_article&timestamp=1684282680&use_new_style=1&req_id=2023051708175973BEBD8C51C20B3360BF&group_id=7233665157719736872&share_token=9C42BA60-033B-458F-84BC-253652AEFB44&tt_from=weixin_moments&utm_source=weixin_moments&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1&source=m_redirect&wid=1684285267155
    <div class="ttp-portal-wrapper ttp-message-wrapper ttp-portal-show ttp-portal-anime-show">
        <div class="message-container">
            <div class="add-to-desktop-panel">
                <div>
                    <p class="title">添加今日头条到电脑桌面</p>
                    <p class="tips">安装后可以在桌面快捷打开，轻松访问海量热点资讯</p>
                </div><button class="add-btn" type="button">立即添加</button>
            </div><button class="close-btn" type="button"></button>
        </div>
    </div>
    <style>
        ol,
        p,
        ul {
            margin: 0;
            padding: 0;
        }

        a,
        button {
            cursor: pointer;
        }

        button,
        input {
            outline: none;
        }

        .ttp-message-wrapper {
            width: 644px;
            background: #fff;
            -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2);
            box-shadow: 0 0 50px rgba(0, 0, 0, .2);
            border-radius: 8px;
            position: fixed;
            left: 50%;
            bottom: -80px;
            z-index: 100;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .ttp-message-wrapper.ttp-portal-wrapper {
            -webkit-transition: -webkit-transform .4s ease-in-out;
            transition: -webkit-transform .4s ease-in-out;
            -moz-transition: transform .4s ease-in-out, -moz-transform .4s ease-in-out;
            transition: transform .4s ease-in-out;
            transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out, -moz-transform .4s ease-in-out;
        }

        .ttp-message-wrapper.ttp-portal-wrapper.ttp-portal-anime-show {
            -webkit-transform: translate(-50%, calc(-100% - 60px));
            -moz-transform: translate(-50%, -moz-calc(-100% - 60px));
            transform: translate(-50%, calc(-100% - 60px));
        }

        .ttp-message-wrapper .message-container {
            padding: 12px 60px 12px 16px;
        }

        .add-to-desktop-panel {
            height: 56px;
            padding-left: 72px;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -moz-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            position: relative;
        }

        .add-to-desktop-panel:before {
            content: "";
            display: block;
            width: 56px;
            height: 56px;
            background: url(./img/tt-icon.png) no-repeat 50%;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .add-to-desktop-panel .title {
            font-weight: 500;
            font-size: 18px;
            line-height: 24px;
            color: #222;
        }

        .add-to-desktop-panel .tips {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #999;
            margin-top: 4px;
        }

        .add-to-desktop-panel .add-btn {
            padding: 8px 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            background: #f04142;
            border-radius: 6px;
            border: none;
        }

        /*按钮*/
        .ttp-message-wrapper .close-btn {
            width: 24px;
            height: 24px;
            border: none;
            background-color: transparent;
            background-image: url(./img/icon_close.e4732ad8.svg);
            position: absolute;
            right: 16px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    </style>
</body>

</html>